<template id="commodity">
    <div>
        <div id="shop_commodity">
        <div class="carousel">
             <swiper :options="swiperOption" ref="mySwiper" id="carousel">
                <!-- slides -->
                <swiper-slide class="swiper_1" v-for="v in goods.goods_gallery">
                    <img  :src="v.img_url" alt="v.img_desc">
                </swiper-slide>
                <!-- Optional controls -->
            </swiper>
            <div class="swiper-pagination"></div>
        </div>
        <div class="commodity_time" v-if="goods.is_promote == 1">
            <p>秒杀价:¥<time>{{goods.promote_price}}</time></p>
            <p>距离结束时间还有<a href="">00</a>:<a href="">11</a>:<a href="">33</a></p>
        </div>
        <div class="commodity_count">
            <h3 id="goods_name">{{goods.goods_name}}</h3>
            <p  id="goods_brief">{{goods.goods_brief}}</p>
            <p><time>¥</time>{{goods.goods_price}}</p>
            <div class="commodity_ge">
                <ul>
                    <li v-for="(v,k) in goods.goods_spec" v-bind:style="k == goods.goods_id ? styleColor : ''" @click="goodInfo(k)">{{v}}</li>
                </ul>

            </div>
        </div>
        <ul class="commodity_list">
            <li>严选</li>
            <li>专业检测</li>
            <li>48小时</li>
        </ul>
        <p class="commodity_p">
            <span>评价<time>{{data.comment_num}}</time></span>
            <span><time>{{data.all_percent ? data.all_percent : 100}}%</time>好评</span>
        </p>
        <div class="commodity_ping" v-for="v in data.comment_list">
            <p><span>{{v.nickname}}</span><span>{{v.comment_time}}</span></p>
            <p>口感<time>{{v.taste_rank}}</time>  颜值<time>{{v.facade_rank}}</time></p>
            <p>{{v.content}}</p>
            <img src="v.headimg" alt="">
        </div>
        <div class="commodity_more">
            <p @click="commentList(goods_id);">查看所有评论</p>
        </div>
        </div>
        <div class="shop_car"></div>
        <v-shopCardetail></v-shopCardetail>
    </div>
</template>
<script>
    import shopCardetail from './shopCardetail.vue'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default{
        name: 'commodity',
        components:{
            'v-shopCardetail':shopCardetail
        },
        data() {
            return {
                swiperOption: {//以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
                    // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br>　　　　　　　　假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                    notNextTick: true,
                    // swiper configs 所有的配置同swiper官方api配置
                    autoplay: 3000,
                    direction: 'horizontal',
                    grabCursor: true,
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    mousewheelControl: true,
                    observeParents: true,
                    loop: true,
                },
                styleColor:{
                    background:'orangered',
                },
                goods_id:this.$route.query.goods_id,
                data:[],
                goods:[],
                comment_list:[],
                guest_type:1,
                guest_val:this.$route.query.goods_id,
                /*限时抢购时间*/
                h_time:'',
                m_time:'',
                s_time:'',
                now_time:'',
                promote_end_date:''

            }
        },
        mounted:function () {
            this.goodsLine(this.goods_id);
            /*let H = $(window).height()-100;
            $('#shop_commodity').height(H);*/

            //分享载入
            /* if(init.isWeiXin()){
                 share.share_wx();
                 share.type ='goods';
                 share.share();
                 share.share_guest();
             }*/
            /*限时抢购时分秒*/
            /*this.countDown('this.promote_end_date');*/
        },
        methods:{
            /*
            *  countDown:function (endtime){
                let time=setInterval(function(){
                    let date=(new Date());
                    let endDate=(new Date(endtime));
                    let dis=endDate-date;
                    let day=Math.floor(dis/1000/60/60/24);
                    let h=Math.floor(dis/1000/60/60%24);
                    let m=Math.floor(dis/1000/60%60);
                    let s=Math.floor(dis/1000%60);
                    if(s<10){s="0"+ s}
                    this.h_time=h;
                    this.m_time=m;
                    this.s_time=s;
                    console.log(h_time);
                    console.log(m_time);
                    console.log(s_time);
                },10)
            },*/
            goodsLine:function (id) {
                this.$http.jsonp(
                    this.GLOBAL.BaseUrl+'/mobile/api/v1/Goods.php?mode=goodsInfo',
                    {
                        params:{goods_id:id},
                        jsonp:'callback'
                    }
                ).then(function(res){
                    if (res.body.code != 200) {
                        alert(res.body.msg);
                        return false;
                    }
                    this.data=res.body.data;
                    this.goods=res.body.data.goods;
                    this.comment_list=res.body.data.comment_list;
                    this.promote_end_date=res.body.data.goods.promote_end_date;//限时抢购结束时间
                    this.now_time=res.body.data.goods.now_time;//限时抢购当前时间
                   /* alert(this.promote_end_date);
                    alert(this.now_time)*/

                });
            },
            commentList:function (id) {
                this.$router.push('/shopDetails/shopEvaluate?goods_id=' + id);
            },
            goodInfo:function (id) {
                if (id == this.goods_id) {
                    return false;
                }
               /* alert(this.goods_id)*/
                this.$router.push('/shopDetails?goods_id=' + id);
                window.location.reload()
            }
        },
    }

</script>
<style>
    .shop_car{
        height:0.8rem;
        width:100%;
        opacity:0;
    }
    /*底部*/
  /*  #shop_commodity{
       overflow-y: scroll;
    }*/
    .commodity_more{
        width:100%;
        height:0.85rem;
    }
    .commodity_more p{
        margin:auto;
        width:1.61rem;
        height:0.42rem;
        line-height:0.42rem;
        text-align:center;
        color:#313131;
        border:1px solid #313131;
        font-size:0.2rem;
        border-radius:0.2rem;
    }
    .commodity_ping p:nth-of-type(1){
        width:100%;
        height:0.52rem;
    }
    .commodity_ping img{
        position:absolute;
        display:block;
        border-radius:50%;
        width:0.65rem;
        height:0.64rem;
        left:0.3rem;
        top:0.26rem;
    }
    .commodity_ping p:nth-of-type(3){
        width:100%;
        height:0.3rem;
        color:#313131;
        font-size:0.22rem;
        line-height:0.3REM;
        text-indent: 0.25rem;
    }
    .commodity_ping p:nth-of-type(2){
        width:100%;
        height:0.57rem;
        color:#aeaeae;
        font-size:0.17rem;
        text-indent: 0.25rem;
        line-height:0.57rem;
    }
    .commodity_ping p:nth-of-type(1) span:nth-of-type(2){
        float:right;
        width:1.76rem;
        height:0.52rem;
        line-height:0.52rem;
        text-align:center;
        color:#868686;
        font-size:0.19rem;

    }
    .commodity_ping p:nth-of-type(1) span:nth-of-type(1){
        float:left;
        height:0.52rem;
        width:3.24rem;
        line-height:0.52rem;
       /* text-align:center;*/
        text-indent: 1.04rem;
        color:#313131;
        font-size:0.16rem;
        overflow: hidden; /*!*自动隐藏文字*!*/
        text-overflow: ellipsis;/*!*文字隐藏后添加省略号*!*/
        white-space: nowrap;/*!*强制不换行*!*/
    }
    .commodity_ping{
        width:100%;
        height:1.64rem;
        border-top:1px solid #e6e6e6;
        padding-top:0.36rem;
        position:relative;
    }
    .commodity_p{
        width:100%;
        height:0.58rem;

    }
    .commodity_p span:nth-of-type(1){
        float:left;
        width:1.73rem;
        height:0.58rem;
        line-height:0.58rem;
        text-align:center;
        color:#898989;
        font-size:0.2rem;
    }
    .commodity_p span:nth-of-type(2) time{
        color:#ff7e00;
    }
    .commodity_p span:nth-of-type(2){
        width:1.32rem;
        line-height:0.58rem;
        text-align:center;
        color:#898989;
        font-size:0.2rem;
        float:right;
    }
    .commodity_list{
        width:100%;
        height:0.5rem;
        background:#ffffff;
        border-top:0.1rem solid #f5f4f2;
        border-bottom:0.1rem solid #f5f4f2;
    }
    .commodity_list li{
        list-style:none;
        float:left;
        color:#bababa;
        font-size:0.16rem;
        line-height:0.5rem;
       text-indent: 0.6rem;
        background:url(../image/tu1.jpg) no-repeat 0.1rem 0.1rem;

    }
    .commodity_ge ul{
        width:4.11rem;
        height:0.53rem;
        display:flex;
        margin:auto;
    }
    .commodity_ge ul li{
        flex:1;
        line-height:0.43rem;
        text-align:center;
        color:#ffffff;
        list-style:none;
        font-size:0.18rem;
        background:#b7b7b7;
        border-radius:0.1rem;
        margin:0.06rem 0.25rem;
    }
    .commodity_ge{
        height:0.53rem;
        width:100%;
        
    }
    .commodity_count{
        height:2.39rem;
        width:100%;
        padding-top:0.3rem;
    }
    .commodity_count p:nth-of-type(1){
        width:100%;
        height:0.4rem;
        line-height:0.4rem;
        text-align:center;
        color:#919191;
        font-size:0.2rem;
    }
    .commodity_count p:nth-of-type(2){
        width:100%;
        height:0.68rem;
        line-height: 0.68rem;
        text-align:center;
        color:#ff7200;
        font-size:0.32rem;
    }
    .commodity_count p:nth-of-type(2) time{
        display:inline-block;
        font-size:0.15rem;
    }
    .commodity_count h3{
        width:100%;
        height:0.46rem;
        line-height:0.46rem;
        text-align:center;
        color:#373737;
        font-size:0.27rem;
    }
    .commodity_time p:nth-of-type(1){
        height:0.82rem;
        text-align:center;
        width:2.1rem;
        line-height:0.82rem;
        color:#ffffff;
        font-size:0.26rem;
        float:left;
    }
    .commodity_time p:nth-of-type(2){
        width:2.97rem;
        height:0.82rem;
        line-height:0.82rem;
        text-align:center;
        color:#ffffff;
        font-size:0.2rem;
        float:right;
    }
    .commodity_time p:nth-of-type(2) a{
        display:inline-block;
        text-decoration: none;
        color:#313131;
        background:#ffffff;
        width:0.32rem;
        height:0.36rem;
        font-size:0.16rem;
        line-height:0.36rem;
        text-align:center;
        border-radius:0.05rem;
    }
    .commodity_time{
        height:0.82rem;
        width:100%;
        background: -webkit-linear-gradient(left, #fe5853 , #ff8c45); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #fe5853, #ff8c45); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right,  #fe5853, #ff8c45); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #fe5853, #ff8c45); /* 标准的语法（必须放在最后） */

    }
    .carousel .swiper-pagination-bullet-active {
        opacity: 1;
        background: #fff;
    }
    .carousel .swiper-pagination {
        position: absolute;
        top: 80%;
        left: 50%;
    }
 /*   .carousel .swiper-pagination{
       position:absolute;
       left:50%;
       top:50%;
   }*/
    .carousel .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        display: inline-block;
        border-radius: 100%;
       /* background: #000;*/
        opacity: 0.2;
        margin: 0 0.1rem;
    }
.carousel{
    width:100%;
    height:6.4rem;
    position:relative;

}
#carousel{
        width:100%;
        height:6.4rem;
}
#carousel .swiper_1{
    width:100%;
    height:6.4rem;
}
    #carousel .swiper_1 img{
        display:block;
        height:6.4rem;
        width:100%;
    }
</style>
